<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <input type="text" onfocus="log()" onblur="out()">
    <div 
        class="box" 
        onmouseover="log()"
        onmouseout="out()"
        onmousemove="move()"
    >

    </div>
    <script>
        function out(){
            console.log('out')
        }
        function move(){
            console.log(456)
        }
        function log(){
            console.log(123)
        }

    </script>

    <ul id="list">
        <li>123</li>
    </ul>
    <input id="inp" type="text">
    <button id="post">发布</button>
    <button onclick="send()">发布2</button>
    <script>
        // 1、获取元素
        var post = document.getElementById('post');
        var list = document.getElementById('list');
        var inp = document.getElementById('inp');
        // 2、绑定事件和事件处理函数
        function send(){
            // list.innerHTML = list.innerHTML + '<li>hello</li>'
            list.innerHTML +=  '<li>'+inp.value+'</li>'
        }
        post.onclick = function(){
            // list.innerHTML = list.innerHTML + '<li>hello</li>'
            list.innerHTML +=  '<li>'+inp.value+'</li>'
        }
    </script>






    <script>
        // 函数
        // 全局范围内(函数外)不能访问函数内的局部变量
        // 函数内可以访问全局变量
        // 局部变量和全局变量同名，函数内优先找局部变量，
        // 函数内没有，找全局
        // var num = 100;//全局变量
        // function fn(){
        //     // 局部变量：函数内，且通过var声明
        //     var num = 200;
        //     var str = 'abc';//都是局部变量
        //     console.log(num);
        //     console.log(str);
        // }
        // console.log(num)
        // fn();
        // console.log(num);
        // console.log(str);//报错
    </script>
</body>
</html>